<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="索引名称">
        <el-input v-model="searchForm.indexName" placeholder="索引名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="success" @click="showDialog">新建索引</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      :default-sort = "{prop: 'storeSize', order: 'descending'}"
      @sort-change="sortChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="health"
        fixed
        label="健康状态">
      </el-table-column>
      <el-table-column
        prop="status"
        fixed
        label="状态">
      </el-table-column>
      <el-table-column
        prop="indexName"
        width="180"
        fixed
        label="索引名称">
      </el-table-column>
      <el-table-column
        prop="uuid"
        label="索引id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="priNum"
        label="主分片数量"
        sortable>
      </el-table-column>
      <el-table-column
        prop="repNum"
        label="副本分片数量"
        sortable>
      </el-table-column>
      <el-table-column
        prop="docCount"
        sortable
        label="文档数">
      </el-table-column>
      <el-table-column
        prop="docDelCount"
        sortable
        label="删除文档数">
      </el-table-column>
      <el-table-column
        prop="storeSize"
        label="全部分片大小"
        sortable>
      </el-table-column>
      <el-table-column
        prop="priStoreSize"
        label="主分片大小"
        sortable>
      </el-table-column>
      
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="text" size="small">详情</el-button>
          <el-button @click="idxSearch(scope.row)" type="text" size="small">索引查询</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新建索引" :visible.sync="dialogFormVisible">
      <el-form :model="saveForm" :rules="rules" label-width="100px" ref="saveForm">
        <el-form-item label="索引名称" prop="indexName">
          <el-input v-model="saveForm.indexName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分片数" prop="priNum">
          <el-input v-model="saveForm.priNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="副本数" prop="repliNum">
          <el-input v-model="saveForm.repliNum" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSaveForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="selectedIndexName"
      :visible.sync="dialogMapping"
      width="50%">
      <div style="height: 200px; overflow-y:auto;">
        <json-viewer :value="jsonData" expanded="true" ></json-viewer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogMapping = false">取 消</el-button>
        <el-button type="primary" @click="dialogMapping = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import { allindex,deleteIndex, createIndex,detailIndex } from '@/api/elastic'

export default {
  name: 'ElasticIndex',
  components: { JsonViewer },
  data() {
    return {
      tableData:[],
      dialogFormVisible: false,
      dialogMapping: false,
      searchForm: {
        indexName: ""
      },
      saveForm: {
        indexName: "",
        priNum: "",
        repliNum: ""
      },
      rules: {
        indexName: [
          { required: true, message: '索引名称必填'}
        ],
        priNum: [
          { required: true, message: '分片数必填'}
        ],
        repliNum: [
          { required: true, message: '副本分片数必填'}
        ]
      },
      jsonData: null,
      selectedIndexName: ""
    }
  },
  created() {
    this.getList();
  },
  methods: {
      getList(indexName) {
        const _self = this;
        allindex(indexName).then(res => {
            _self.loading = false;
            _self.tableData = res.data;
        }).catch(err=>{
            console.log(err);
        });
      },
      sortChange({ column, prop, order }) {
          
      },
      handleDelete(row) {
        const _self = this;
        deleteIndex(row.indexName).then(res=>{
          if (res.code == 20000) {
            this.$message({
              message: "索引删除成功",
              type: 'success'
            });
            _self.getList();
          }
        });
      },
      handleDetail(row) {
        const _self = this;
        detailIndex(row.indexName).then(res=>{
          if (res.code == 20000) {
            const obj = JSON.parse(res.data);
            _self.jsonData = obj;
            _self.dialogMapping = true;
            _self.selectedIndexName = row.indexName + "详情";
          }
        });
      },
      showDialog() {
        this.dialogFormVisible = true;
      },
      onSearch() {
        this.getList(this.searchForm.indexName)
      },
      onSaveForm() {
        const _self = this;
        this.$refs['saveForm'].validate((valid) => {
          if (valid) {
            createIndex(_self.saveForm).then(res=>{
              if (res.code == 20000) {
                this.$message({
                  message: "索引创建成功",
                  type: 'success'
                });
                _self.dialogFormVisible = false;
                _self.getList();
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      idxSearch(row) {
        console.log(row.indexName);
        // 路由跳转
      }
  }
}
</script>

<style lang="scss" scoped>
</style>
